<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>校验表单数据</title>
		<!--1加入jQuery-->
	<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
	<!--2加入Validate-->
	<script type="text/javascript" src="../js/jquery.validate.js" ></script>
	<!--3加入国际化-->
	<script type="text/javascript" src="../js/messages_zh.js" ></script>
	</head>
	
	<script type="text/javascript">
		//4编写校验规则
		$(function(){
			$("#formid").validate({
				rules:{
					username:{
						required:true,
						rangelength:[6,16]
					},
					password:{
						required:true,
						rangelength:[6,10],
						digits:true
					},
					repassword:{
						equalTo:"#password"
					},
					email:{
						required:true,
						email:true
					},
					sex:"required"
				},
				messages:{
					username:{
						required:"用户不能为空",
						rangelength:"长度必须是{0}-{1}之间"
					},
					password:{
						required:"密码不能为空",
						rangelength:"长度必须是{0}-{1}之间",
						digits:"密码只能是数字"
					},
					repassword:{
						equalTo:"两次密码不一致"
					},
					email:{
						required:"邮箱不能为空",
						email:"邮箱格式不正确"
					},
					sex:"性别不能为空"
				}
			});
		});
	</script>

	<body>
		<h2>用户注册</h2>
		<form action="#" method="get" id="formid">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
			
				<tr>
					<td width="20%">用户名:</td>
					<td width="80%"><input type="text" name="username" id="username"></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>

				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>